<template>
	<view class="container">
		<u-navbar title="曲线流量" :leftIconSize="24" bgColor="#f2f1f6" :autoBack="true"
			:placeholder="true" safeAreaInsetTop>
			<!-- 	  	<view class="u-nav-slot" slot="right">
	  		<u-icon name="order" color="#000" size="24"></u-icon>
	  	</view> -->
		</u-navbar>
		<mescroll-body @init="mescrollInit" @up="upCallback" :down="downOption" @down="downCallback" :up="upOption">
			<view class="card" v-for="(item, index) in dataList" :key="index">
				<view class="card-header">
					<uni-icons type="location-filled" size="24" color="#00aaff"></uni-icons>
					<text class="title">{{ item.gspName }}</text>
					<text class="time">{{ item.createTime }}</text>
				</view>
				<view class="card-content">
					<!-- 第一行：K值、N值 -->
					<view class="info-row">
						<view class="info-item bg-green">
							<text>K值:</text>
							<text class="value">{{ item.k }}</text>
						</view>

						<view class="info-item bg-orange">
							<text>N值:</text>
							<text class="value">{{ item.n }}</text>
						</view>
					</view>

					<!-- 第二行：水深、流量 -->
					<view class="info-row">
						<view class="info-item bg-blue">
							<text>水深:</text>
							<text class="value">{{ item.depthofwater }}m</text>
						</view>

						<view class="info-item bg-purple">
							<text>流量:</text>
							<text class="value">{{ item.flowrate }}</text>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import dayjs from '@/common/dayjs.min.js';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				upOption: {
					page: {
						num: 0,
						size: 20 // 每页数据的数量,默认10
					},
					noMoreSize: 2,
					empty: {
						tip: '暂无相关数据'
					}
				},
				downOption: {},
				dataList: [{
					name: '测点A',
					depth: 2.5,
					k: 0.8,
					n: 0.015,
					flow: 12.6
				}, ],
			}
		},
		onShow() {
			this.dataList = []
		},
		onLoad(option) {

		},
		methods: {
			onCardClick(i) {
				console.log('i', i);
			},
			// 人工测报
			devitFn(i) {
				console.log('i', i);
			},
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				uni.$u.http.get('/device/curveFlowRecording/list', {
					params: {
						pageSize: pageSize,
						pageNum: pageNum,
					}
				}).then(res => {
					console.log('res', res);
					if (res.code == 200) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = res.rows;
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length;
						// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
						// let totalPage = data.total;
						// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
						let totalSize = res.total;
						// 接口返回的是否有下一页 (true/false)

						// 处理全显示
						// if(this.ssId == null){
						// 	return
						// }
						//设置列表数据
						if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
						this.dataList = this.dataList.concat(curPageData); //追加新数据
						console.log('列表', res);
						//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
						this.mescroll.endBySize(curPageLen, totalSize);
					} else {
						uni.showToast({
							title: '暂无数据',
							duration: 1500
						});
					}
				}).catch(err => {
					console.log('err', err);
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				})
			},
			// 相对时间
			relativeTime(date) {
				const dateToCheck = dayjs(date.TIM);
				// 获取今天的日期
				const today = dayjs().format('YYYY-MM-DD HH:mm');
				// 计算dateToCheck距离今天的天数差异
				const daysDifference = dateToCheck.diff(today, 'day');
				// 如果你想要一个绝对值（不考虑正负），可以使用Math.abs
				const absoluteDaysDifference = Math.abs(daysDifference);
				return absoluteDaysDifference
			},
			// 下拉刷新
			downCallback() {
				this.dataList = []
				this.mescroll.resetUpScroll();
			},
			/*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
			reloadList() {
				this.mescroll.resetUpScroll();
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
	}

	.card {
		margin-bottom: 20rpx;
		padding: 20rpx;
		border-radius: 16rpx;
		background-color: #fff;
		// box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		&-header {
			display: flex;
			align-items: center;
			padding-bottom: 16rpx;
			border-bottom: 1rpx solid #f5f5f5;
			margin-bottom: 16rpx;
			position: relative;

			.title {
				font-size: 36rpx;
				font-weight: 500;
				margin-left: 12rpx;
				color: #333;
			}

			.time {
				position: absolute;
				right: 0;
				font-size: 28rpx;
				color: #999;
			}
		}

		&-content {
			display: flex;
			flex-direction: column;
			gap: 16rpx;
		}
	}

	.info-row {
		display: flex;
		justify-content: space-between;
	}

	.info-item {
		width: 48%;
		padding: 16rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		font-size: 40rpx;
		margin: 5rpx;

		.value {
			margin-left: auto;
			font-weight: bold;
		}

		uni-icons {
			margin-right: 8rpx;
		}
	}

	.bg-blue {
		background-color: rgba(33, 150, 243, 0.1);
	}

	.bg-green {
		background-color: rgba(76, 175, 80, 0.1);
	}

	.bg-orange {
		background-color: rgba(255, 152, 0, 0.1);
	}

	.bg-purple {
		background-color: rgba(156, 39, 176, 0.1);
	}
</style>
<style>
	page {
		background-color: #f2f1f6;
	}
</style>